<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表分析</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="bookmark" href="favicon.ico" type="image/x-icon"　/>
    <style>
        .chart{
            float: left;
            width: 630px;height:400px;
        }
    </style>
</head>
<body>
<div id="main">
    <h2>KETTLE FILE REPOSITORY VISUAL ETL PROJECT.</h2>
    <div id="chart2" class="chart"></div>
    <div id="chart1" class="chart"></div>
    <!--<div id="chart5" class="chart"></div>-->
    <div id="chart3" class="chart"></div>
    <!--<div id="chart4" class="chart"></div>-->
    <!--<div id="chart6" class="chart"></div>-->
</div>
</body>
<script type="text/javascript" src="js/echarts-4.2.0-rc.2.js"></script>
<script type="text/javascript" src="js/echarts-theme-macarons.js"></script>
<script>
    // 第二个参数可以指定前面引入的主题
    var chart = echarts.init(document.getElementById('chart1'), 'macarons');
    chart.setOption({

        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }]
    });

    var chart = echarts.init(document.getElementById('chart2'), 'macarons');
    chart.setOption({
        title: {
            text: 'Total data exchange'
        },
        legend: {
            data:['Exchange number']
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: 'Exchange number',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }]
    });

    var chart = echarts.init(document.getElementById('chart3'), 'macarons');
    chart.setOption({
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    });

    var chart = echarts.init(document.getElementById('chart4'), 'macarons');
    chart.setOption({
        title: {
            text: '基础雷达图'
        },
        tooltip: {},
        legend: {
            data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: [
                { name: '销售（sales）', max: 6500},
                { name: '管理（Administration）', max: 16000},
                { name: '信息技术（Information Techology）', max: 30000},
                { name: '客服（Customer Support）', max: 38000},
                { name: '研发（Development）', max: 52000},
                { name: '市场（Marketing）', max: 25000}
            ]
        },
        series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : '预算分配（Allocated Budget）'
                },
                {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : '实际开销（Actual Spending）'
                }
            ]
        }]
    });

    var chart5 = echarts.init(document.getElementById('chart5'), 'macarons');
    var chart5Option= {
        tooltip : {
            formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                detail: {formatter:'{value}%'},
                data: [{value: 50, name: '完成率'}]
            }
        ]
    };
    chart5.setOption(chart5Option, true);
    setInterval(function () {
        chart5Option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
        chart5.setOption(chart5Option, true);
    },1000);

    var chart6 = echarts.init(document.getElementById('chart6'), 'macarons');



</script>
</html>